<template>
	<view class="uni-list">
		<view class="history-section icon">
			<view class="listItem flex" style="height: auto;">
				<text>头像:</text>
                <view class="head-box">
                    <button open-type="chooseAvatar" class="avator" @chooseavatar="chooseavatar">
                        <image :src="headImg || 'https://sg-1312154519.cos.ap-shanghai.myqcloud.com/S0000111/image/proImg_202211251421414231.png'"></image>
                    </button>
                </view>
                <!-- <div class="mask_tip">点击设置我的头像</div> -->
			</view>
			<view class="listItem">
				<text>昵称:</text>
                <div class="flex flex-1"  @touchstart.native.stop="checkPrivacy">
                    <input type="nickname" @blur="getNick" :focus="nicknameInputFocus" placeholder="点击填写昵称" v-model="nickname" />
                </div>
                <!-- <div class="mask_tip">点击输入我的昵称</div> -->
				<text class="yticon"></text>
			</view>
			<view class="listItem">
				<text>姓名:</text>
				<input type="text" placeholder="请填写姓名" v-model="realname" />
				<text class="yticon"></text>
			</view>
			<view class="listItem">
				<text>性别</text>
                <div class="flex-1 flex-end">
                    <radio-group style="marginl-left: auto;" @change="sexChange">
                        <label style="margin-right: 10rpx">
                            <radio value="01" :checked="sex == '01'"></radio>
                            男
                        </label>
                        <label style="margin-right: 30rpx">
                            <radio value="00" :checked="sex == '00'"></radio>
                            女
                        </label>
                    </radio-group>
                </div>
			</view>
			<view class="listItem">
				<text>手机号码</text>
				<input type="text" placeholder="手机号码" v-model="mobile" />
				<text class="yticon"></text>
			</view>
			<view class="listItem">
				<text>生日:</text>
                <view class="flex-1 flex-end">
                    <picker mode="date" class="pickerStyle" :value="date" :start="startDate" :end="endDate" @change="dataChange">
                        <view class="uni-input">{{ date }}</view>
                    </picker>
                </view>
				<text class="yticon icon-arrow-right"></text>
			</view>
		</view>
		<view class="change-view">
			<button class="change-btn" @click="upChange()">提交修改</button>
			<button class="change-btn logout" @click="toLogout">退出登录</button>
		</view>
	</view>
</template>

<script>
import interact from '@/utils/interact';
import { apiList } from '@/api/base';
import { changeUserinfo } from '@/api/user';
import { getUserInfoFn, logout } from '@/hooks/login';
export default {
	data() {
		return {
            headImg: '',
            nicknameInputFocus: false,
			nickname: '',
			realname: '',
			mobile: '',
			date: '请选择',
			FId: '',
			sex: '', //00女 01男
			userId: ''
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	onLoad: function(option) {
        this.getUserInfo()
	},
	onUnload: function(option) {

	},
	methods: {
        //获取用户信息start
		getUserInfo() {
            let data = this.$store.state.user.info.info
            if(!data) return;
			this.realname = data.FUserName;
			this.nickname = data.FNickName;
			this.mobile = data.FPhone;
			this.userId = data.FUserId;
			this.sex = data.FSex;
            this.headImg = data.FHeadImg
            this.date = data.FBirthDay ? data.FBirthDay.dateFormat('yyyy-MM-dd') : ''
		},
        getNick(e) {
            console.log(e);
            this.nickname = e.detail.value
            this.nicknameInputFocus = false
        },

        chooseavatar(e) {
            console.log(e);
            uni.uploadFile({
                url: apiList.uploadFileToTencent,
                filePath: e.detail.avatarUrl,
                name: 'file',
                formData: {
                    fileType: 'cashApp',
                    fileName: 'file',
                    prifix: 'headImg',
                    merNo: this.$store.state.shop.merNo,
                    token: this.$store.state.user.account.token,
                },
                success: (uploadFileRes) => {
                    let res = JSON.parse(uploadFileRes.data)
                    if(res.code == 1) {
                        this.headImg =  res.data.url
                    } else {
                        interact.toast(res.msg)
                    }
                    // this.headImg =  res.data.url
                },
                fail: (err) => {
                    interact.modal(err.data.msg)
                }
            });
        },
		sexChange(e) {
			this.sex = e.target.value;
		},
		//获取当前时间
		getDate(type, date) {
			if (!date) {
				date = new Date();
			}
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		dataChange(e) {
			this.date = e.target.value;
		},
		//添加或修改成功之后回调end
		//提交修改star
		upChange() {
			var data = {
				nickName: this.nickname,
				realName: this.realname,
				mobile: this.mobile,
				sex: this.sex,
				birthDay: this.date + ' 00:00:00',
				userId: this.userId,
                headImg: this.headImg,
			};
			changeUserinfo(data).then(res => {
				console.log('修改信息',res);
                getUserInfoFn().then(() => {
                    uni.navigateBack();
                })
			})
		},
		// 退出登录
		toLogout() {
			uni.showModal({
				content: '确定要退出登录么',
				success: e => {
					if (e.confirm) {
						logout();
						setTimeout(() => {
							uni.navigateBack();
						}, 200);
					}
				}
			});
		}
	},
};
</script>

<style lang="scss" scoped>


.head-box {
    width: 150rpx;
    flex: 1;
    // height: 150rpx;
    display: flex;
    // flex-direction: column;
    // align-items: center;
    justify-content: center;
    flex-shrink: 0;
    .avator{
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        // flex: 1;
        height: 120rpx;
        overflow: hidden;
        position:relative;
        z-index:1;
        padding: 8rpx 20rpx 8rpx 0;
        margin: 0;
        background: #fff;
        border: none;
        &::after{
            border: none;
        }
        image{
            border-radius: 50%;
            width: 110rpx;
            height: 110rpx;
        }
    }
}


.history-section {
	// padding: 30rpx 0 0;
	margin-top: 1rpx;
	background: #fff;
	border-radius: 10rpx;
	.h-list {
		white-space: nowrap;
		padding: 30rpx 30rpx 0;

		image {
			display: inline-block;
			width: 160rpx;
			height: 160rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
		}
	}
}

.uni-list {
	// background-color: #FFFFFF;
	// position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.uni-list-cell {
	background-color: #ffffff;
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.uni-list-cell-hover {
	background-color: #eee;
}

.uni-list-cell-pd {
	padding: 22rpx 30rpx;
}

.uni-list-cell-left {
	font-size: 28rpx;
	padding: 0 30rpx;
}

.uni-list-cell-db,
.uni-list-cell-right {
	flex: 1;
}

.uni-list-cell::after {
	position: absolute;
	z-index: 3;
	right: 0;
	bottom: 0;
	left: 30rpx;
	height: 1px;
	content: '';
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	background-color: #c8c7cc;
}

.uni-media-list-text-top {
	width: 100%;
	line-height: 36rpx;
	font-size: 30rpx;
}

.uni-media-list-logo {
	height: 90rpx;
	width: 90rpx;
	margin-right: 20rpx;
}

.uni-media-list-logo image {
	height: 100%;
	width: 100%;
}

.uni-navigate-right.uni-media-list {
	padding-right: 74rpx;
}

.uni-list-cell-navigate {
	font-size: 30rpx;
	padding: 22rpx 30rpx;
	line-height: 48rpx;
	position: relative;
	display: flex;
	box-sizing: border-box;
	width: 100%;
	flex: 1;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
}

.uni-list-cell-navigate {
	padding-right: 36rpx;
}

.change-btn {
	background: $baseColor;
	color: #fff;
	font-size: 28rpx;
	margin-top: 26rpx;
	margin: 25rpx 30rpx;
}
.logout {
	position: fixed;
	bottom: env(safe-area-inset-bottom);
	background-color: #e92f2f;
	width: 100%;
	border-radius: 0;
	font-size: 28rpx;
	margin: 0;
}
.change-view {
	margin-top: 10rpx;
}

.listItem {
	display: flex;
	height: 100rpx;
	margin-left: 30rpx;
	border-bottom: 1px solid #ddd;
	align-items: center;
	font-size: 28rpx;
    position: relative;
    .mask_tip{
        position: absolute;
        left: 150rpx;
        color: #ccc;
        z-index: 100;
        pointer-events: none;
    }
    .yticon{
        color: #ccc;
        font-size: 26rpx;
        margin: 0 10rpx;
    }
}
.listItem input {
	flex: 1;
	text-align: right;
    height: 100%;
}
.listItem .icon-you {
	// color: $base-color;
	margin-right: 30rpx;
	font-size: 30rpx;
	margin-left: 15rpx;
}

.pickerStyle {
	flex: 1;
	text-align: right;
}
</style>
